<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>${applicationScope.ojName}</title>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/amazeui.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/amazeui.flat.min.css"/>
    <style>
        .main {
            width: 60%;
            margin: 0 auto;
        }

        .title {
            font-size: 2em;
            background: #FFF;
            border-bottom: solid 1px #CCCCCC;
            padding: 10px;
            margin-bottom: 30px;
        }

        .title a {
            font-size: 20px;
        }

        .problem .span {
            margin-top: 10px;
            margin-bottom: 0;
            font-size: 30px;
        }

        .content {
            font-size: 16px;
        }

        .limit {
            font-size: 14px;
        }

        .problem p {
            margin: 4px 0;
        }

        .problem h2 {
            margin-top: 20px;
            margin-bottom: 12px;
        }

        .problem .edit {
            width: 100%;
            text-align: right;
        }

        .code {
            width: 730px;
            height: 500px;
        }

        .am-modal-dialog {
            width: 750px;
        }
    </style>

</head>

<body>

<jsp:include page="/heard.html" flush="true"/>

<div class="title">
    <div class="main">
        题库
        <a href="${pageContext.request.contextPath}/problemset.html">全部题目</a>
    </div>
</div>

<div class="main">
    <div class="am-panel am-panel-default">
        <header class="am-panel-hd">
            <h3 class="am-panel-title">#${requestScope.problem.problem_id} : ${requestScope.problem.title}</h3>
        </header>
        <div class="am-panel-bd problem">
            <div class="limit">
                时间限制：${requestScope.problem.time_limit}ms
                <br/> 内存限制：${requestScope.problem.memory_limit}MB
            </div>
            <div class="span">描述</div>
            <!--题目描述-->
            <div class="content">
                ${requestScope.problem.description}
            </div>
            <!--End 题目描述-->
            <!--输入-->
            <div class="span">输入</div>
            <div class="input">
                ${requestScope.problem.input}
            </div>
            <!--End 输入-->
            <!--输出-->
            <div class="span">输出</div>
            <div class="output">
                ${requestScope.problem.output}
            </div>
            <!--End 输出-->
            <!--样例输入-->
            <h2>样例输入</h2>
            <div class="output">
                <pre>${requestScope.problem.sample_input}</pre>
            </div>
            <!--End 样例输入-->
            <!--样例输出-->
            <h2>样例输出</h2>
            <div class="output">
                <pre>${requestScope.problem.sample_output}</pre>
            </div>
            <!--End 样例输出-->
            <!--提示-->
            <h2>提示</h2>
            <div class="hint">
                ${requestScope.problem.hint}
            </div>
            <!--End 提示-->
            <div class="edit">
                <c:choose>
                    <c:when test="${sessionScope.user eq null}">
                        <a type="button" href="#"
                           class="am-btn am-btn-success am-radius login">
                            <span class="am-icon-user"></span>&nbsp;
                            登录
                        </a>
                    </c:when>
                    <c:otherwise>
                        <button type="button" class="am-btn am-btn-success am-radius _submit">
                            <span class="am-icon-code"></span>&nbsp;
                            提交
                        </button>
                        <div class="am-btn-group">
                            <button type="button" class="am-btn am-btn-default am-radius">统计</button>
                            <button type="button" class="am-btn am-btn-default am-radius">讨论</button>
                        </div>
                    </c:otherwise>
                </c:choose>
            </div>
        </div>
    </div>
</div>

<jsp:include page="/foot.html" flush="true"/>

<div class="am-modal am-modal-prompt" tabindex="-1" id="my-submit">
    <div class="am-modal-dialog">
        <form action="${pageContext.request.contextPath}/api/submit/code.html" method="post" id="submit">
            <input type="hidden" name="problem_id" value="${requestScope.problem.problem_id}">
            <div class="am-modal-hd">#${requestScope.problem.problem_id}：${requestScope.problem.title}</div>
            <div class="am-modal-bd">
                <select title="lang" name="lang">
                    <option value="0">C</option>
                    <option value="1">C++</option>
                    <%--<option value="2">Pascal</option>--%>
                    <option value="3">Java</option>
                    <option value="6">Python</option>
                </select>
                <textarea class="am-modal-prompt-input code" title="code" name="code"></textarea>
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                <span class="am-modal-btn" data-am-modal-confirm>提交</span>
            </div>
        </form>
    </div>
</div>

<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/amazeui.min.js"></script>
<script>
    $(function () {
        $('.login').click(function () {
            var url = window.location.href;
            window.location.href = "${pageContext.request.contextPath}/login.html?from=" + url;
        });
        $('._submit').click(function () {
            $('#my-submit').modal({
                relatedTarget: this,
                onConfirm: function (e) {
                    $('#submit').submit();
//                        alert('你输入的是：' + e.data || '')
                },
                onCancel: function (e) {

                }
            });
        });
    })
</script>
</body>

</html>